<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作优化</title>
    <style>.active{color:red}</style>
<body>
    <div>
       <p>你好p1</p>
       <p>你好p2</p>
       <p>你好p3</p>
       <p>你好p4</p>
       <p>你好p5</p>
       <p>你好p6</p>
       <p>你好p7</p>
       <p>你好p8</p>
       <p>你好p9</p>
       <p>你好p10</p>
       <p>你好p11</p>
       <p>你好p12</p>
       <p>你好p13</p>
       <p>你好p14</p>
       <p>你好p15</p>
       <p>你好p16</p>
       <p>你好p17</p>
       <p>你好p18</p>
       <p>你好p19</p>
       <p>你好p20</p>
    </div>
    
    <script>
        // 每一次js操作dom都会让页面重新渲染一次，优化dom操作
        //   不缓存dom被操作了40
        /* for(var i=0;i<document.getElementsByTagName("p").length;i++){
            console.log(document.getElementsByTagName("p")[i]);
        } */
        // 1 缓存方式  //dom被操作了一次
        // var list  = document.getElementsByTagName("p");
        // for(var i=0;i<list.length;i++){
        //     console.log(list[i]);
        // }

        // 2 多次操作编程一次操作（创建1000个a标插入dom）  dom 真正被插入1000次
       /*  for(var i=0;i<1000;i++){
            var a = document.createElement("a");
            a.innerHTML="链接"+i+"<br/>";
            document.body.append(a);
        } */
        // 创建一个文档片段
        var frag = document.createDocumentFragment();
        for(var i=0;i<1000;i++){
            var a = document.createElement("a");
            a.innerHTML="链接"+i+"<br/>";
            frag.append(a);
        }
        document.body.append(frag);

      



    </script>

</body>
</html>